<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<router-link to="/user">用户</router-link>
			<router-link to="/dog">狗狗</router-link>
			<router-view></router-view>
		</div>
		
		<template id="userTem">
			<div>
				<h1>我是组件内容！！！</h1>
			</div>
		</template>
		
		<template id="dogTem">
			<div>
				<h1>你想要的品种</h1>
				<router-link to="/dog/cq">柴犬</router-link>
				<router-link to="/dog/jmsw">金毛狮王</router-link>
				<router-view></router-view>
			</div>
		</template>
		
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script src="../js/vue-router.js"></script>
		<script>
			
			let user = {
				template: "userTem"
			}
			
			let dog = {
				template: "#dogTem"
			}
			
			let cq = {
				template: `<h1>可爱淘气</h1>`
			}
			
			let jmsw = {
				template: `<h1>邋邋遢遢</h1>`
			}
			
			let router = new VueRouter({	
				routes: [
						 {path: "/", redirect: "/dog"},
						 {path: "/user",component: user},
						  //children属性可以实现路由的嵌套. 通过父子关系,.则子组件的渲染,在父组件定义的router-view标签中展现.
						 {path: "/dog",component: dog,children: [
							 {path: "/dog/cq",component: cq},
							 {path: "/dog/jmsw",component: jmsw}
						 ]}
						 /*该请求是/目录下的请求,所以组件渲染也在根组件 */
						 /* {path: "/dog/samo", component: samo},
						 {path: "/dog/hsq", component: hsq}, */
						]
			})
			
			const app = new Vue({
				el: "#app",
				router
			})
			
		</script>
	</body>
</html>
